<template>
    <div class="pagination">
        <a href="javascript:" @click="prevPage">上一页</a>
        <span>{{ currPage }}/{{ totalPage }}</span>
        <a href="javascript:" @click="nextPage">下一页</a>
        <input type="text" maxlength="5" ref="input" :value="currPage" @keyup.enter="turning"/>
        <a href="javascript:" @click="turning">跳转</a>
    </div>
</template>

<script>
    export default {
        name: 'pagination',
        created(){
            this.page = this.currPage;
        },
        data: function () {
            return {
                currPage: 1,
            }
        },
        methods: {
            turning(){
                let page = this.$refs.input.value;
                if(! /^-?\d+$/.test(page)){
                    return false;
                }
                page = parseInt(page);
                page = page < 1 ? 1 : page;
                page = page > this.totalPage ? this.totalPage : page;
                this.currPage = page;
                this.$refs.input.value = page;
                this.$emit('change-page', page);
            },
            prevPage(){
                if(this.currPage <= 1){
                    return false;
                }
                this.$emit('change-page', --this.currPage)
            },
            nextPage(){
                if(this.currPage >= this.totalPage){
                    return false;
                }
                this.$emit('change-page', ++this.currPage)
            },
        },
        props: {
            totalPage: {require: true},
            initPage: {default: 1},
        }
    }
</script>

<style lang="scss">
    .pagination{
        float: right;
        a,input{box-sizing: border-box;height: 32px;line-height: 32px;width: 70px;padding: 0 10px;text-align: center;border: 1px solid #eaeef0;border-radius: 4px;display: inline-block;vertical-align: middle;}
        a{color: #7c8ba6;}
        input{margin: 0 10px;}
        span{font-size: 16px;color: #7c8ba6;margin: 0 10px;}
    }
</style>
